<template> 
  <div id="app">
    <myhead></myhead> <!-- 头部区域 -->
      <router-view></router-view> <!-- 中间区域，采用路由方式 -->
    <mybottom></mybottom> <!-- 尾部区域 -->
  </div>
</template>

<script>

export default {
  name: 'App',
  components: { //注册模板
  },
  data(){ //数据
    return{
    }
  },
  methods: { //方法
  }
}
</script>

<style scoped>
  /* v-enter 是进入之前，元素的起始状态，此时还没有开始进入 */
    /* v-leave-to 【这是一个时间点】 是动画离开之后，离开的终止状态，此时，元素 动画已经结束了 */
    /* v-enter-active 【入场动画的时间段】 */
    /* v-leave-active 【离场动画的时间段】 */
  /* .v-enter {
    opacity: 0;
    transform: translateY(100%);
  }
  .v-leave-to{
    transform: translateY(-100%);
  }
  .v-enter-active, .v-leave-active {
    transition: all 0.6s ease;
    position: absolute;
  } */
  #app{
    padding-bottom: 50px;
  }
</style>
